<template>
  <page-view class="relative flex flex-row justify-center items-center">
    <img src="../assets/img/login_bg.jpg" class="absolute w-full h-full -z-10 blur-[30px]" />
    <div class="login-box">
      <div class="flex flex-row justify-center items-center py-10">
        <el-icon size="34px" style="color: purple;">
          <Eleme />
        </el-icon>
        <span class="text-[24px] font-bold ml-4">悠优点餐后台</span>
      </div>
      <el-form :model="adminInfo" class="box-border px-20 mt-10" :rules="adminInfoRules" ref="loginFormEl">
        <el-form-item prop="zh">
          <el-input class="h-[40px]" v-model="adminInfo.zh" placeholder="请输入账号">
            <template #prepend>账号</template>
          </el-input>
        </el-form-item>
        <el-form-item prop="admin_pwd">
          <el-input class="h-[40px]" v-model="adminInfo.admin_pwd" type="password" placeholder="请输入账号">
            <template #prepend>密码</template>
          </el-input>
        </el-form-item>
        <div class="flex flex-row justify-evenly">
          <el-button :loading-icon="Loading" :loading="isLoading" type="primary" @click="submitLoginForm">
            {{ isLoading ? '正在登录...' : '登录系统' }}</el-button>
          <el-button type="danger">忘记密码</el-button>
        </div>
      </el-form>
    </div>
  </page-view>
</template>

<script setup>
// 所见即所得，所见即所用
import { reactive, ref } from "vue";
// 导入路由管理对象
import { useRouter } from "vue-router"
import { Eleme, Loading } from "@element-plus/icons-vue";
import API from "../utils/API";
import { ElNotification, ElMessage } from 'element-plus'
// 导出的时候没有加default  所以需要解构
import { mainStore } from "../store"

// 得到路由管理对象
const router = useRouter();
// 创建store对象
const store = mainStore();
// console.log(store);
const adminInfo = reactive({
  zh: "18371977938",
  admin_pwd: "123456"
});

//这里就是验证规则
const adminInfoRules = {
  zh: [
    { required: true, message: "请输入账号", trigger: "blur" }
  ],
  admin_pwd: [
    { required: true, message: "请输入密码", trigger: "blur" }
  ]
}
const isLoading = ref(false);

const loginFormEl = ref(null);

const submitLoginForm = () => {
  loginFormEl.value.validate(valid => {
    if (valid) {
      checkLogin();
    }
    else {
      ElMessage({
        message: '验证不通过',
        type: 'warning',
      })
    }
  });
}

const checkLogin = () => {
  isLoading.value = true;
  API.adminInfo.checkLogin(adminInfo)
    .then(result => {
      // console.log(result);
      // 登录成功的结果，放到pinia中存储起来
      store.setLoginUserInfo(result.loginUserInfo);
      store.setToken(result.token);
      ElNotification({
        title: "提示",
        message: "登陆成功",
        type: "success"
      })
      // 登录成功需要跳转页面
      router.replace({
        name: "DataView"
      })
    }).catch(error => {
      console.log(error);
      ElNotification({
        title: "提示",
        message: "密码错误",
        type: "error"
      })
    }).finally(() => {
      isLoading.value = false;
    })
}

</script>

<style scoped lang="scss">
.login-box {
  @apply w-[420px] py-20;
  box-shadow: 0 0 20px 5px purple;
  border: 1px solid white;
}
</style>